<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
</head>
<body>
<div class="row"></div>
<div class="row" id="app">
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                Order Items
            </div>
            <div class="panel-body">
                <checkout :orders="orders" :debug="debug"></checkout>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="panel panel-info">
             <div class="panel-heading">
                Select Items
            </div>
            <div class="panel-body">
                <div class="row">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search Items" v-model="search">
                        </div>
                    </form>
                </div>
                <div class="row">
                    <div class="col-md-2" v-for="item in items | filterBy search">
                        <div class="col-md-2" @click="addOrder(item)">{{ item.name }}</div>
                    </div>
                </div>
            </div>
            <div class="panel-footer">Panel footer</div>
        </div>
        <!-- debugging -->
        <input type="checkbox" v-model="debug" /> Enable Debug
        <pre v-if="debug">{{ $data | json }}</pre>
    </div>
</div>

<template id="checkout-template">
    <table class="table">
        <thead>
            <th>Item Name</th>
            <th>Qty</th>
            <th>Price</th>
            <th></th>
        </thead>
        <tbody>
            <tr v-for="order in orders">
                <td>{{ order.name }}</td>
                <td>{{ order.qty }}</td>
                <td>{{ order.total }}</td>
                <td @click="removeOrder(order)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
            </tr>
            <tr>
                <td></td>
                <td><b>Total</b></td>
                <td>{{ totalOrder }}</td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <pre v-if="debug">{{ $data | json }}</pre>
</template>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
<script src="app.js"></script>
</body>
</html>
